/* 底部播放蓝 */
.playerbar{
    position:fixed;
    left:0;
    bottom:0px;
    width:100%;
    height:53px;
    background:url(../images/playbar.png);
    background-repeat:repeat-x;
    background-position:0 0;
    /* 给一个css3动画 */
    transition: all 0.3s;
}

.player-wrap{
    position:absolute;
    left:50%;
    top:6px;
    width:980px;
    height:47px;
    z-index:1002;
    margin-left:-490px;
}

/* 播放按钮 */
.player-wrap .playbtns{
    float:left;
    width:137px;
    height:40px;
    padding:6px 0 0 0;
}

.player-wrap .playbtns a{
    float:left;
    width:28px;
    height:28px;
    margin:5px 8px 0 0;
    background:url(../images/playbar.png);
    background-position:0 0 ;
    background-repeat: repeat-x;
    display:block;
}

.playbtns a.last{
    background-position:0 -130px;
}

.playbtns a.last:hover{
    background-position:-30px -130px;
}

.playbtns a.play{
    width:36px;
    height:36px;
    margin-top:0;
    background:url(../images/playbar.png);
    background-position:0 -204px;
    background-repeat: no-repeat;
}

/* js中播放中按钮 */
.playbtns a.player{
    width:36px;
    height:36px;
    margin-top:0;
    background:url(../images/playbar.png);
    background-position:0px -165px;
    background-repeat: no-repeat;
}

.playbtns a.player:hover{
    background-position:-40px -165px;
}
/* js中播放按钮结束 */

.playbtns a.play:hover{
    background-position:-40px -204px;
}

.playbtns a.next{
    background-position:-80px -130px;
}

.playbtns a.next:hover{
    background-position:-110px -130px;
}

/* 歌曲头像 */
.songhead{
    width:34px;
    height:34px;
    position:relative;
    margin:6px 15px 0 0;
    float:left;
}

.songhead img{
    width:34px;
    height:34px;
}

.songhead a.song-msk{
    position:absolute;
    top:0;
    left:0;
    width:34px;
    height:34px;
    display:block;
    background-repeat: repeat-x;
    background:url(../images/playbar.png);
    background-position:0 -80px;
}

/* 播放区 */
/* 进度条和时间 */
.playwrap{
    width:581px;
}

.playtitle{
    height:28px;
    overflow: hidden;
    color:#e8e8e8;
    text-shadow:0 1px 0 #171717;
    line-height: 28px;
}

.playtitle a{
    /* 超出省略 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap:normal;
}

a.song-name{
    max-width:300px;
    color:#e8e8e8;
    float:left;
    font-size:12px;
}

a.song-name:hover{
    text-decoration: underline;
}

/* 谁唱的 */
a.song-people{
    max-width:220px;
    margin-left:15px;
    color:#9b9b9b;
}

a.song-src{
    float:left;
    width:14px;
    height:15px;
    margin:7px 0 0 13px;
    background:url(../images/playbar.png);
    background-repeat: no-repeat;
    background-position:-110px -103px;
}

a.song-src:hover{
    background-position:-130px -103px;
}

/* 进度条DIV  progress-bar */
.progress-bar{
    width:466px;
    position:relative;
    height:9px;
    background:url(../images/statbar.png);
    background-repeat: no-repeat;
    background-position:right 0;
}

.playbox{
    float:left;
}

.playbox .cur{
    height:9px;
    background:url(../images/statbar.png);
    background-repeat: no-repeat;
    background-position:left -66px;
    position:absolute;
    /* 这个最大值用来控制js拖动的最大距离 */
    max-width: 466px;
    top:0;
    left:0;
}

.playbox .cur span.playbar-btn{
    position:absolute;
    top:-7px;
    right: -13px;
    width:22px;
    height:24px;
    background:url(../images/playicn.png);
    background-repeat: no-repeat;
    background-position:0 -250px;
    cursor: pointer;
}

.playbox .cur span.playbar-btn:hover{
    background:url(../images/playicn.png);
    background-repeat: no-repeat;
    background-position:0 -280px;
}

/* 播放时间 */
div.playtime{
    top:-3px;
    right:-84px;
    color:#797979;
    text-shadow:0 1px 0 #121212;
    font-size:12px;
    position:absolute;
}

div.playtime em{
    color:#a1a1a1;
}

/* 收藏和分享按钮 */
.option-wrap{
    width:85px;
    float:left;
    position:relative;
    display:block;
    font-size:12px;
}

.option-pip{
    float:left;
    width:25px;
    height:25px;
    margin:11px 2px 0 0;
    background:url(../images/pip.png);
    background-repeat: no-repeat;
    background-position-y: 0px;
}

.option-pip:hover{
    background-position-y: -25px;
}

.option-addsong{
    float:left;
    width:25px;
    height:25px;
    margin:11px 2px 0 0;
    background:url(../images/playbar.png);
    background-repeat: repeat-x;
    background-position:-88px -163px;
}

.option-addsong:hover{
    background-position:-88px -189px;
}

.option-share{
    float:left;
    width:25px;
    height:25px;
    margin:11px 2px 0 0;
    background:url(../images/playbar.png);
    background-repeat: repeat-x;
    background-position:-114px -163px;
}

.option-share:hover{
    background-position:-114px -189px;
}

/* 音量和播放模式 */
.kzwrap{
    position:relative;
    z-index:10;
    width:115px;
    padding-left:13px;
    float:left;
}

.kzwrap .volumeicn{
    float:left;
    width:25px;
    height:25px;
    margin:11px 2px 0 2px;
    background:url(../images/playbar.png);
    background-repeat: repeat-x;
    background-position:-2px -248px;
}

.kzwrap .volumeicn:hover{
    background-position:-31px  -248px;
}

.kzwrap .typeicn,
.kzwrap .typeicn1,
.kzwrap .typeicn2{
    float:left;
    width:25px;
    height:25px;
    margin:11px 2px 0 0;
    background:url(../images/playbar.png);
    background-repeat: repeat-x;
    background-position:-66px -248px;
}

.typeicn:hover{
    background-position:-93px -248px;
}

.kzwrap .typeicn1{
    background-position:-66px -344px;
}

.kzwrap .typeicn1:hover{
    background-position: -93px -344px;
}

.kzwrap .typeicn2{
    background-position: -3px -344px;
}

.kzwrap .typeicn2:hover{
    background-position: -33px -344px;
}

.kzwrap .listicn{
    float:left;
    width:38px;
    height:25px;
    line-height:27px;
    text-align:center;
    color:#666;
    text-decoration: none;
    text-indent: 0;
    text-shadow:0 1px 0 #080707;
    padding-left:21px;
    margin:10px 0px 0 0;
    background:url(../images/playbar.png);
    background-repeat: repeat-x;
    background-position:-42px -68px;
    font-size:12px;
}

.kzwrap .listicn:hover{
    background-position:-42px -98px;
}

span.dd{
    margin:11px 0 0 2px;
    width:5px;
    height:25px;
    position:fixed;
    background:url(../images/playbar.png);
    background-repeat: repeat-x;
    background-position:-300px -248px;
}

/* 音量调节按钮容器DIV */
.volume-wrap{
    position:absolute;
    top:-113px;
    left:9px;
    width:32px;
    height:113px;
    max-height: 113px;
}

.volume-wrap-bg{
    position:absolute;
    top:0;
    left:0;
    width:32px;
    height:113px;
    background:#000;
    opacity: 0.8;
    /* 背景在层级底部 */
    z-index:2;
}

/* 音量的深色背景 */
.volume-wrap .sound-bg{
    position:absolute;
    top:7px;
    left:14px;
    width:4px;
    height:90px;
    padding:4px 0;
    background:#171717;
    z-index:25;
    border-radius:5vw;
}

.volume-curr{
    position:absolute;
    float:left;
    top:auto;
    bottom: 5px;;
    left:6px;
    /* 超出隐藏 */
    overflow: hidden;
    width: 18px;
    max-height: 90px;
    min-height: 0px;
    padding-top:8px; 
    padding-bottom:6px;  
    background:transparent;
    /* border:1px solid blue; */
}

.curr-btn-bg{
    width:4px;
    height:100px;
    position: absolute;
    background:url(../images/curr-btn.png);
    background-repeat: no-repeat;
    padding:0;
    left:8px;
    /* bottom:5px; */
}

.volume-curr-btn{
    position: absolute;
    float:left;
    left:1px;
    z-index:500;
    width:18px;
    height:20px;
    z-index: 999;
    margin-bottom:-6px;
    cursor: pointer;
    background:url(../images/playicn.png);
    background-repeat: no-repeat;
    background-position:-40px -250px;

}

.volume-curr-btn:hover{
    background-position:-40px -280px;
}

/* 播放模式弹出信息 */
.kzwrap .tip{
    position:absolute;
    top:-39px;
    left:12px;
    width:81px;
    height:32px;
    line-height: 35px;
    color:#fff;
    font-size:12px;
    text-align: center;
    background:#333;
    border:2px solid #000;
    border-radius:5px;
    /* 边框阴影 */
    text-shadow:2px 2px 4px #000;
}

/* 播放列表和歌词 */
.songlist-wrap{
    width:986px;
    height:301px;
    background:#121212;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    position:absolute;
    bottom:47px;
    left:50%;
    margin-left:-493px;
}

/* 播放列表顶部标题 */
.songlist-head{
    height:41px;
    position:relative;
}

.songlist-head h4{
    position:absolute;
    left:25px;
    top:0;
    height:39px;
    line-height: 39px;
    font-size:14px;
    color:#e2e2e2;
    margin:0;
    padding:0;
}

.songlist-head a.addall{
    position:absolute;
    top:12px;
    left:398px;
    height:15px;
    line-height: 15px;
    cursor: pointer;
    font-size:12px;
}

.songlist-head .addall:hover{
    text-decoration: underline;
    color:#fff;
}

.songlist-head .addall:hover span{
    background-position:-24px -20px;
}

.songlist-head a.addall span{
    float:left;
    width:16px;
    height:16px;
    margin:0 6px 0 0;
    background-repeat: repeat-x;
    background:url(../images/playlist.png);
    background-position:-24px 0;
}

.songlist-head span.line{
    position:absolute;
    top:13px;
    left:477px;
    height:15px;
    border-left:1px solid #000;
    border-right:1px solid #2c2c2c;
}

.songlist-head a.clear{
    position:absolute;
    top:12px;
    left:490px;
    height:15px;
    line-height: 15px;
    cursor: pointer;
    font-size:12px;
}

.songlist-head a.clear:hover{
    text-decoration: underline;
    color:#fff;
}

.songlist-head a.clear:hover span{
    background-position:-51px -20px;
}

.songlist-head a.clear span{
    float:left;
    width:16px;
    height:16px;
    margin:0 6px 0 0;
    background-repeat: repeat-x;
    background:url(../images/playlist.png);
    background-position:-51px 0;
}

p.songlist-title{
    position:absolute;
    left:595px;
    top:0;
    width:346px;
    text-align: center;
    height:39px;
    line-height: 39px;
    color:#fff;
    font-size:14px;
    margin:0;
    padding:0;
}

/* 关闭按钮 */
span.listclose{
    position:absolute;
    top:6px;
    right:8px;
    width:10px;
    height:10px;
    margin:10px 15px 0 0;
    overflow: hidden;
    cursor: pointer;
    background:url(../images/close.png);
}

span.listclose:hover{
    background:url(../images/close-hover.png);
}

/* 播放主体 */
div.list-body{
    position:absolute;
    left:0;
    top:41px;
    /* background:url(../music/imgages/1.jpg);
    background-size:100%;
    filter:blur(10px); */
    /* opacity: 0.5; */
    width:976px;
    height:260px;
    overflow: hidden;
    background:#171717;
    padding:0 5px 0 5px;
}

/* 歌曲名字 */
.songname-wrap{
    position:absolute;
    left:2px;
    top:0;
    z-index:4;
    height:260px;
    width:553px;
    overflow: hidden;   
}

.songname-wrap li{
    width:100%;
    float:left;
    list-style-type:none;
}

.songname-wrap li:hover{
    background:#000;
    color:#fff;
}

.songname-wrap li div.col-1{
    background:url(../images/tip.png);
    margin-top:8px;
    width:10px;
    height:13px;
    float:left;
    margin-left:10px;
    cursor: pointer;
    overflow: hidden;
    visibility: hidden;
}

.songname-wrap li:hover .col-4 a,
.songname-wrap li:hover .col-5,
.songname-wrap li:hover .col-3{
    color:#fff;
    visibility: visible;
}

.songname-wrap .col-2{
    color:#fff;
    width:256px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    float:left;
    margin-left:10px;
    line-height:28px;
    height:28px;
    cursor: pointer;
    font-size:12px;
}

.col-3{
    float:left;
    width:104px;
    height:28px;
    line-height: 28px;
    visibility: hidden;
}

.col-3 i{
    float:left;
    overflow: hidden;
    margin:7px 10px 0 0;
    width:16px;
    height:16px;
    background-repeat: no-repeat;
    background:url(../images/playlist.png);
    background-position:-51px 0;
    cursor: pointer;
}

.col-3 .i-del{
    background-position:-51px 0;
}

.col-3 .i-del:hover{
    background-position:-51px -20px;
}

.col-3 .i-dwn{
    background-position:-57px -50px;
}

.col-3 .i-dwn:hover{
    background-position:-80px -50px;
}

.col-3 .i-share{
    background-position:0 0;
}

.col-3 .i-share:hover{
    background-position:0 -20px;
}

.col-3 .i-add{
    background-position:-24px 0;
}

.col-3 .i-add:hover{
    background-position:-24px -20px;
}

.col-4,.col-5{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    float:left;
    width:50px;
    font-size:12px;
    height:28px;
    line-height: 28px;
    padding-left:10px;
    color:#9b9b9b;
    cursor: pointer;
}

.col-4 a{
    color:#9b9b9b;
    font-size:12px;
}

.col-4 a:hover{
    text-decoration: underline;
}

.col-6{
    float:left;
    width:37px;
    height:28px;
    padding-left:6px;
    cursor: pointer;    
}

.col-6 a{
    width:14px;
    height:15px;
    background:url(../images/link.png);
    float:left;
    margin:8px 5px 0 0;
}

.col-6 a:hover{
    background:url(../images/link-hover.png);
}

 /* 播放主体中间的间隔条和计算歌曲个数生成的滑动模块 */
.bine-wrap{
    position:absolute;
    left:555px;
    width:6px;
    height:260px;
    background:#000;
    z-index:11;
    opacity: 0.7;
}

/* 歌词区域背景 */
.lyric-imgbg{
    position:absolute;
    top:0;
    background:url(../music/imgages/1.jpg);    
    width:420px;
    height:259px;
    background-size:97%;
    filter: blur(10px);
    z-index:10;
    left:560px;
}

.lyric-colorbg{
    position:absolute;
    top:0;
    width:420px;
    height:259px;
    z-index:13;
    background:#666;
    filter: blur(5px);
    opacity: 0.6;
    left:560px;
}
/* 右边歌词部分 */
.lyric{
    position:absolute;
    left:560px;
    width:418px;
    height:259px;
    z-index:30;
    background:transparent;
    overflow-y: auto;
    scroll-behavior:smooth;
}

/* 设置他的滚动条 */
.lyric::-webkit-scrollbar{
    width:5px;
    /* height:260px; */
    /* border-radius:10px; */
    /* border:1px solid transparent; */
    /* background:transparent; */
    /* color:#2c2c2c; */
}

.lyric::-webkit-scrollbar-thumb{
    background-color:#333;
}

.lyric p{
    color:#bfbfbf;
    text-align: center;
    height:27px;
    line-height: 25px;
    font-size:12px;
    z-index:31;
    transition:all 0.4s;
}

/* 问号 */
div.wh{
    position:absolute;
    right:25px;
    top:12px;
    width:21px;
    height:21px;
    z-index:33;
    display:block;
}

.icn-ask{
    display:block;
    width:21px;
    height:21px;
    background-repeat: no-repeat;
    background:url(../images/playlist.png);
    background-position:0 -50px;
    z-index:32;
    float:right;
}

.icn-ask:hover{
    background-position:-24px -50px;
}

/* 右边纵向滑动条 */
.bine-wrap-right{
    position:absolute;
    right:0;
    width:6px;
    height:260px;
    background:#171717;
    z-index:11;
    opacity: 0.7;
}

/* 右浮动锁定按钮 */
.lock{
    width:60px;
    height:22px;
    position:fixed;
    right:23px;
    bottom:45px;
    background-repeat: no-repeat;
    background:url(../images/playbar.png);
    background-position:0 -380px;
    /* 给一个css3动画 */
    transition: all 0.3s;
    z-index:20;
}

.lock a.lock-btn{
    display:block;
    width:10px;
    height:10px;
    margin:8px 0 0 20px;
    background-repeat: no-repeat;
    background-position:-100px -380px;
    background:url(../images/lock.png);
}

.lock a.lock-btn:hover{
    background:url(../images/lock-hover.png);
    margin:6px 0 0 18px;
    width:13px;
    height:13px;
}

/* 回顶按钮 */
.gotop-btn{
    position:fixed;
    text-indent: -9999px;
    width:47px;
    height:42px;
    bottom:160px;
    left:50%;
    z-index:1005;
    display:none;
    margin-left:500px;
    border-radius:2px;
    background:url(../images/pages/dex/gotop.png);
    outline: none;
}

.gotop-btn:hover{
    background:url(../images/pages/dex/gotop-hover.png);
}


/* 分享按钮的弹出对话框 */
.share-wrap{
    width:530px;
    height:326px;
    background:#fff;
    border-radius: 4px;
    display: flex;
    position:absolute;
    left:50%;
    top:50%;
    box-sizing: border-box;
    box-shadow: 5px 5px 10px#797979,10px 10px 15px #797979;
    transform: translate(-50%,-170%);
    /* margin:auto; */
    z-index: 1000;
}

.share-wrap .sharebar-title{
    height:38px;
    width: 467px;
    line-height: 38px;
    padding:0 45px 0 18px;
    position: relative;
    margin:0;
    background:#2d2d2d;
    border-bottom: 1px solid #191919;
    border-radius: 4px 4px 0 0;
    color:#fff;
    font-size: 14px;
    font-weight: bold;
}

.share-wrap .sharebar-title img{
    float:right;
    margin:15px -25px auto 0px;
    cursor: pointer;
}

.sharebottom{
    width:530px;
    background:#fff;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
    color:#333;
    padding:0;
    margin:20px auto;
}

.sharebottom-left{
    position: relative;
    margin: auto 50px auto 0;
}

.sharebottom-right{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: auto 20px auto 0;
}

.sharebottom-right p{
    font-size: 18px;
    font-weight: 500;
    margin:0;
    padding:0 0 10px 0;
    display: block;
}

.sharebottom-right .link-title{
    padding:10px 0 0 0;
    font-size: 13px;
    font-weight: 300;
    color:#333;
    line-height: 17px;
    Letter-spacing:2px;
}

.sharebottom-right .link-title a{
    color:#0c73c2;
    letter-spacing: 0px;
}

.share-bar-bottom{
    line-height: 28px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background:#fff;
    border-radius: 0 0 4px 4px;
}

.share-bar-bottom p{
    display: inline-block;
    border-radius: 5vw;
    border:1px solid #191919;
    width:110px;
    font-size: 12px;
    color: #333;
    padding-left: 10px;
    cursor: pointer;
    margin:-5px 0 30px 0;
}
/* 播放栏的浮动效果 */
/* div.float{
    width:100%;
    height:15px;
    background:#f00;
    bottom:45px;
    position:fixed;
    z-index:1;
    display:block;
    cursor:pointer;
} */